<template>
	<!-- 大盒子 -->
	<div class="content">
		<!-- 主体内容 -->
		<div class="main">
			<!-- 新增等Model -->
			<div class="editModel">
				<el-dialog
				  title="修改收费项目"
				  :visible.sync="dialogVisible"
				  width="58%"
				  :before-close="handleClose">
				  <div class="form">
					<!-- 表单 -->
					<el-form :model="editForm" ref="editForm" size="mini">
						<el-row :gutter="20">
							<el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType" :key="i">
							<!-- select - Other -->
							<el-form-item v-if="v.type == 'select1'" :label="v.label" :prop="v.modelValue">
								<el-select v-model="$data.editForm[v.modelValue]" :disabled="v.disabled ? addDisabled : v.disabled" filterable
								@focus="handlefoucs(v,i)" @change="handleChange" :filter-method="searchMethod" :popper-append-to-body="false">
									<el-option v-for="(item,index) in $data[v.op]" :key="index" :label="item.label" :value="item.id">
										<div id="optionItem">
											<span style="width: 48px;">{{ item.id }}</span>
											<el-tooltip class="item" effect="light" :content="item.chargeProjectName" placement="top">
												<span style="text-align: left;">{{ item.chargeProjectName }}</span>
											</el-tooltip>
											<el-tooltip class="item" effect="light" :content="item.priceCode" placement="top">
												<span>{{ item.priceCode }}</span>
											</el-tooltip>
											<el-tooltip class="item" effect="light" :content="item.description" placement="top">
												<span style="width: 288px;text-align: left;">{{ item.description }}</span>
											</el-tooltip>
										</div>
									</el-option>
								</el-select>
							</el-form-item>
							<!-- select -->
							<el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
								<el-select v-model="$data.editForm[v.modelValue]" @focus="handlefoucs(v,i)" @change="handleChange">
									<el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id">
										<div style="font-size: 12px;display: flex;justify-content: space-between;align-items: center;">
											<span>{{ item.id }}</span>
											<span>{{ item.label }}</span>
											<span>{{ item.code }}</span>
										</div>
									</el-option>
								</el-select>
							</el-form-item>
							<!-- input -->
							<el-form-item v-if="v.type == 'input'" :label="v.label" :prop="v.modelValue">
								<el-input v-model="$data.editForm[v.modelValue]" :disabled="v.disabled" @blur="inputChance(v,i)"></el-input>
							</el-form-item>
							<!-- checked -->
							<el-form-item v-if="v.type == 'checked'" :label="v.label" :prop="v.modelValue">
								<el-checkbox v-model="$data.editForm[v.modelValue]"></el-checkbox>
							</el-form-item>
							<!-- textarea -->
							<el-form-item v-if="v.type == 'textarea'" :label="v.label" :prop="v.modelValue">
								<el-input type="textarea" :rows="3" v-model="$data.editForm[v.modelValue]"></el-input>
							</el-form-item>
							
							</el-col>
						</el-row>
					</el-form>
				  </div>
				  
				  <span slot="footer" class="dialog-footer">
				    <el-button size="mini" type="primary" @click="editSubmit">确 定</el-button>
				    <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
				  </span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
// self
import AddType from './AddType.js'
// import AccMainType from './AddPlanMainType.js'
import editForm from './addForm.js' //Form表单
import Pinyin from "@/external/pinyin.js"; //中译音
// 接口
import { getCostList,standardList,getCostType, getMREC, getSosTypes,updateChargeProject } from "@/api/Outpatient/category.js";

	export default {
		props: ['parentMethod'],
		data() {
			return {
				// str
				inputSearchValue:'',
				// number
				pageNum: 1, //当前页currentPage
				pageSize: 28, //每页展示条数
				totalSize: 10, //总条数
				// blean
				dialogVisible: false,
				
				// arr
				formType:[], // 表单头部内容
				selectChanceAll:[],// 收费项目名称
				CostIdOptions:[], // 病案费别
				ClassIdOptions:[], // 财务分类
				expenseCategoryIdOptions:[], // 费用费别
				statusOption:[{ id:0,label:'禁用',value:'禁用'},{ id:1,label:'可用',value:'可用'}],
				// obj
				editForm:{}, //form表单 * 
				
			}
		},
		mounted() {
			this.getForm();
		},
		methods: {
			/* 数据源 */
			async loadData(){
				let res = await standardList({ name:this.inputSearchValue });
				if(res.code===200){
					this.selectChanceAll = res.data.map(v => {return { label: v.chargeProjectName, ...v}})
				}else{
					this.$message.error(res.message)
					this.selectChanceAll = [];
				}
			},
			// 挂载或销毁前后重新赋值后端参数
			getForm(){
				// 解构赋值排除 list 属性 => 弃用
				// this.addHeadrForm = editForm.map(item => { let { list, ...newItem } = item; return newItem })[0];
				// 左侧提交表单
				this.editForm = editForm.map(v => {return v })[0]; // Form
				// 定义数据来源
				this.formType = AddType.map(function(val) { return val })
			},
			// axios
			async axiosGetSosTypes(){
				// 调用财务分类接口
				let rs = await getSosTypes();
				this.ClassIdOptions = rs.data.map(v=>{ return { label: v.name , ...v } })
			},
			async axiosGetCostType(){
			   let res = await getCostType();
			   this.expenseCategoryIdOptions = res.data.map(v=>{ return { label: v.name , ...v } });
			},
			async axiosGetMREC(){
				let res = await getMREC();
				this.CostIdOptions = res.data.map(v=>{ return { label: v.name , ...v } })
			},
			/* props */
			removeAllSpaces(str) {
			  return str.trim().replace(/\s+/g, '');
			},
			// input失焦 简码转换赋值
			inputChance(v,i){
				// i event
				console.log(v,i);
			},
			searchMethod(query, option) {
				query = this.removeAllSpaces(query);
					console.log(query);
					if(query){
						this.loading = true
						this.inputSearchValue = query
						this.pageNum = 0
						this.pageSize = 0
						this.loadData();
						this.loading = false
					}else{
						this.inputSearchValue = query
						this.pageNum = 1
						this.pageSize = 28
						this.loadData();
					}
			},
			// select聚焦
			async handlefoucs(v,i){
				this.idx = i;
				console.log(i);
				// i event  suffixIcon 为接口
				switch (i) {
					case 3: 
						// 名称
						this.loadData();
					break;
					case 6:
						// 财务分类
						this.axiosGetSosTypes();
					break;
					case 11:
						// 费用费别
						this.axiosGetCostType();
					break;
					case 12:
						// 病案费别
						this.axiosGetMREC();
					break;
				}
			},
			// selectChance
			handleChange(val){
				// i event  suffixIcon 为接口
				switch (this.idx) {
					case 3: 
						// 根据 selectChanceAll绑定的id 找到对应的对象
						let nameObj = this.selectChanceAll.find(name => name.id === val)
						// 开始赋值
						this.mergeObjects(this.editForm, nameObj);
						this.editForm.simpCode = this.makePy(this.editForm.chargeProjectName).toUpperCase()
					break;
				}
			},
			// 打开新增模态框
			open(parm){
				// 开始赋值
				console.log(this.editForm,parm);
				this.mergeObjects(this.editForm, parm);
				this.dialogVisible = true;
				this.editForm.simpCode = this.makePy(this.editForm.chargeProjectName).toUpperCase()
			},
			//修改保存
			async editSubmit(){
				console.log(this.editForm);
				//触发验证表单
				let res = await updateChargeProject(this.editForm)
				console.log(res);
				if (res.code === 200){
				this.$message({ message:'已修改', type:"success" });
				this.parentMethod(); // 更新数据驱动 => 父组件 charing
				this.dialogVisible = false
				}else{
				  //验证失败
				  console.log('失败');
				}
			},
			// 关闭model
			handleClose(done){
				this.$confirm('确认关闭？')
				.then(_ => {
					done();
				})
				.catch(_ => {});
			},
			// methods ZDY
			// 合并追加对象
			mergeObjects(A, B) {
			  for (const key in B) {
			    if (
			      B.hasOwnProperty(key) &&          // 确保是 B 自身的属性
			      A.hasOwnProperty(key) &&          // 确保 A 中存在该属性
			      B[key] !== undefined &&           // 排除 undefined
			      B[key] !== null &&                // 排除 null
			      B[key] !== ''                     // 排除空字符串 (按需调整)
			    ) {
			      A[key] = B[key];
			    }
			  }
			  return A;
			}
			
		},
	}
</script>

<style lang="less" scoped>
	// content
	.content {
		height: 100%;
		width: 100%;
		// header
		.header {
			
		}

		// main
		.main {
			.editModel{
				// 穿透
				/deep/ .el-dialog__header{
					padding: 4px;
					background-color: #007bb0;
				}
				/deep/ .el-dialog__title{
					font-size: 12px;
					color: #fff;
				}
				/deep/ .el-dialog__headerbtn .el-dialog__close{
					color: #fff;
				}
				/deep/ .el-dialog__headerbtn{
					top: 10px;
				}
				.form{
					/deep/ .el-form{
						padding: 12px;
						display: flex;
					}
					/deep/ .el-tabs--border-card{
						width: 100%;
					}
					/deep/ .el-form-item__content{
						display: flex;
						font-size: 12px;
					}
					/deep/ .el-form-item{
						margin-top: -8px;
					}
					/deep/ .el-form-item__label{
						font-size: 12px;
						display: flex;
					}
					/deep/ .el-select-dropdown__item{
						border: 1px solid #eeeeee;
						padding: 0;
						height: 28px;
						#optionItem {
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
							text-align: center;
							justify-content: center;
							span{
								display: inline-block;
								font-size: 12px;
								width: 88px;
								height: 30px;
								line-height: 30px;
								white-space: nowrap;      /* 禁止换行 */
								overflow: hidden;         /* 隐藏溢出内容 */
								text-overflow: ellipsis;  /* 溢出显示省略号 */
							}
						}
					}
				}
			}
		}
		
		// feet
		.feet {
			
		}

	}
</style>